<template>
  <!--个人中心头部-->
    <div class="l-header-info">
      <!--logo-->
      <img class="l-logo" :src="logo" alt="无法显示">

      <!--头像-->
      <img class="l-avatar" :src="avatar" alt="无法显示">
    </div>
</template>

<script>
  import logo from "~/img/logo.png"
  import avatar from "~/img/avatar.png"
    export default {
      name: "header-info",
      data () {
        return {
          logo,
          avatar
        }
      }
    }
</script>

<style scoped>
.l-header-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #000;
  padding: 0 20px;
  box-sizing: border-box;
}

  .l-avatar {
    width: 40px; /*no*/
    height: 40px; /*no*/
  }
</style>
